<template>
  <div class="MAvatar" :style="{
    width: px2(size),
    height: px2(size),
    lineHeight: px2(size),
  }">
    <el-avatar
        v-if="src"
        class="avatar click"
        fit="cover"
        src="https://www.ruanyifeng.com/blogimg/asset/2015/bg2015071011.png"
    >
      <img slot="default" :src="avatar" alt="" />
    </el-avatar>
    <div class="textAvatar" v-else>
      <div class="textAvatar-main">
        <span :style="{
          transform: 'translate(-50%, -50%) ' +  'scale('+ size/40 +')'
        }">{{ showName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import ElAvatar from 'element-ui/packages/avatar/src/main'
export default {
  name: "MAvatar",
  data() {
    return {}
  },
  extends: ElAvatar,
  props:{
    fit:{
      type: String,
      default: 'cover'
    },
    size:{
      type: Number,
      default: 36
    },
    name:{
      type: String,
      default: '用户'
    }
  },
  components: {},
  computed: {
    showName(){
      let name = this.name
      if(name.length > 2){
        name = name.slice(name.length-2,name.length)
      }
      return name
    }
  },
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
@import "../../style/var.scss";
.MAvatar{
  display: inline-block;
  vertical-align: middle;
  width: px2(30);
  height: px2(30);
}
.avatar{
  width: 100%;
  height: 100%;
}
.textAvatar{
  display: inline-block;
  width: 100%;
  height: 100%;
  .textAvatar-main{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    background-color: $mainColor;
    color: #fff;
    border: px2(0) solid $mainColor;
    //padding-left: 10%;
    position: relative;
    span{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
      font-size: 14px;
      transform-origin: 50% 50%;

    }
  }
}
</style>
